import config from '@/config.js'

export default {
  name: 'tileShow',
  props: {
    // 该组件一般用v-for创建一大堆,所以提供一个数据,记录在列表中的索引
    index: {
      type: Number,
      default: null
    },
    // 原始图片地址
    src: {
      type: String,
      default: null
    },
    // 在非自定义显示图片的情况下,图片的额外样式
    imageExtraStyle: {
      type: Object,
      default () {
        return {}
      }
    },
    // 是固定边框的显示情况
    borders: {
      type: Array,
      default () {
        // 左/上/右/下 是否有边框
        return [false, false, false, false]
      }
    },
    // 鼠标覆盖显示蓝色边框是否启用
    hoverBorderEnabled: {
      type: Boolean,
      default: false
    },
    // 该图块是否被选中,显示四面蓝色边框
    isSelected: {
      type: Boolean,
      default: false
    },
    // 另一个边框特效,可以分段显示四周边框,显示颜色为黑色
    selectedStyle: {
      type: Object,
      default () {
        return {}
      }
    },
    
    // 遮盖层是否启用
    isCoverEnabled: {
      type: Boolean,
      default: false
    },
    // 点击遮盖层选择Icon触发，为NULL时不显示
    onSelect: {
      default: null,
      type: Function
    },
    // 点击遮盖层删除Icon触发，为NULL时不显示
    onDelete: {
      default: null,
      type: Function
    },
    // 点击遮盖层交换Icon触发，为NULL时不显示
    onExchange: {
      default: null,
      type: Function
    },
    // 遮盖层眼睛是否显示
    seeEnabled: {
      default: true,
      type: Boolean
    },
    // 遮罩层详细信息
    seeDetail: {
      default: '',
      type: String
    },
    // 遮罩层图标大小
    coverIconSize: {
      default: 24,
      type: [Number, String]
    },
  },
  data () {
    return {
      
    }
  },
  computed: {
    // 获取图片的资源地址
    imgSrc () {
      return config.filePath + this.src
    },
    
    // 决定左右边框的显示情况
    borderSide () {
      let result = []
      if (this.borders[0]) {
        result.push('border-left')
      }
      if (this.borders[2]) {
        result.push('border-right')
      }
      return result
    },
    
    // 决定上下边框的显示情况
    borderFloor () {
      let result = []
      if (this.borders[1]) {
        result.push('border-top')
      }
      if (this.borders[3]) {
        result.push('border-bottom')
      }
      return result
    }
  },
  methods: {
    clickHandler () {
      this.$emit('on-click')
      // 键盘事件的元素获取焦点
      let keyEvent = this.$el.querySelector('.tile-show-key-event')
      keyEvent.focus()
    },
    
    mousedownHandler () {
      this.$emit('on-mouse-down')
    },
    
    mouseupHandler () {
      this.$emit('on-mouse-up')
    },
    
    mouseenterHandler () {
      this.$emit('on-mouse-enter')
    },
    
    // 监听键盘按键
    keydownHandler () {
      this.$emit('on-key-down')
    },
    
    // 监听Ctrl+C
    copyHandler () {
      this.$emit('on-copy')
    },
    
    // 监听Ctrl+V
    pasteHandler () {
      this.$emit('on-paste')
    }
    
  }
}